<template>
	<view class="container">
		<view class="cont-nav-bar">
		<uni-nav-bar-vue title="" :dark="true" themeBgColor="#1F2130" leftIcon="left" themeColor="#fff"
			@clickLeft="clickLeft"></uni-nav-bar-vue>
			</view>
		<scroll-view scroll-y="true" class="h-100">
			<view class="tap">
				<view class="avatar-box space-between">
					<view class="avatar v-center">
						<view class="center out">
							<view class="center nei">
								<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/gj.png" class="gj"></image>
								<image :src="user.avatar" mode="" class="img"></image>
							</view>
						</view>
						<view class="login-text">
							<view class="name v-center">
								<view class="name-text">{{user.name}}</view>
								<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/vip.png" class="vip-img"></image>
							</view>
							<view class="id">有效期至：{{user.vipTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cont">
				<image v-if="!isUser" src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jrky.png" class="img" mode="">
				</image>
				<image v-else src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jrbky.png" class="img" mode="">
				</image>
				<view class="text">
					1、富侨汇会员折扣服务每日可使用一次 <br />
					2、确认使用后不支持取消
				</view>
			</view>
			<view class="last" v-if="isUser">
				<view class="time v-center">最后一次核销信息</view>
				<view class="cont1">
					<view class="left space-between">
						<view class="text">核销时间</view>
						<view class="text1">{{info.createTime}}</view>
					</view>
					<view class="left space-between">
						<view class="text">核销门店</view>
						<view class="text1">{{info.shopName}}</view>
					</view>
					<view class="left space-between">
						<view class="text">核销方式</view>
						<view class="text1">{{info.useType == 1 ? '二维码' : '会员码'}}</view>
					</view>
					<view class="left space-between">
						<view class="text">订单ID</view>
						<view class="right v-center">
							<view class="text1">{{info.code}}</view>
							<image  @click="copyText(info.code)" src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/copy.png" class="copy-img"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom center" v-if="!isUser" @click="useCode">
			<view class="center btn">确认使用折扣</view>
		</view>
	</view>
</template>

<script>
	import {
		getTime,
		isExpired,
		getTimeBytimeStamp
	} from "../../utils/plug"
	import {
		getUserInfo,
		getUseList,
		writeOff
	} from '../../api/active.js'
	import uniNavBarVue from "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniNavBarVue
		},
		data() {
			return {
				user: '',
				id: '',
				code: '',
				isUser: false,
				info: '',
				type: ''
			}
		},
		onLoad(e) {
			this.code = e.code
			this.type = e.type
			this.id = e.code.slice(0, -1)
			if (this.id) {
				this.getuser()
				this.getList()
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			useCode() {
				uni.showModal({
					title: '提示',
					content: '确认使用折扣?',
					success: (res) => {
						if (res.confirm) {
							writeOff({
								staffId: uni.getStorageSync("userId"),
								useCode: this.code,
								type: this.type
							}).then(()=>{
								uni.showToast({
									title: '核销成功',
									icon: 'none',
									duration: 1500
								})
								setTimeout(()=>{
									uni.reLaunch({
										url: '/pages/index/index'
									})
								},1500)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getuser() {
				getUserInfo({
					userId: this.id
				}).then(res => {
					this.user = res.data
					this.user.vipTime = getTime(this.user.vipTime)
				}).catch(()=>{
					uni.showToast({
						title: '请输入正确的折扣码',
						icon: 'none',
						duration: 1500
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			},
			copyText(text) {
				uni.setClipboardData({
					data: text.toString(),
					success() {
						uni.showToast({
							title: "复制成功",
							icon: "none",
							duration: 2000
						})
					},
					fail() {
						console.log('复制失败')
					}
				})
			},
			getList() {
				getUseList({
					userId: this.id,
					size: 10,
					current: 1
				}).then(res => {
					if(!res.data.records.length) {
						this.isUser = false
					}
					if(res.data.records.length) {
						this.info = res.data.records[0]
						this.info.createTime = getTimeBytimeStamp(this.info.createTime)
						this.isUser = this.isToday(this.info.createTime)
					}
				})
			},
			isToday(timestamp) {
			  const today = new Date();
			  const targetDate = new Date(timestamp);
			
			  // 比较年份、月份和日期
			  return today.getFullYear() === targetDate.getFullYear() &&
			         today.getMonth() === targetDate.getMonth() &&
			         today.getDate() === targetDate.getDate();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cont-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}
	.last {
		width: 690rpx;
		height: 394rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;

		.time {
			height: 80rpx;
			font-weight: 800;
			font-size: 30rpx;
			color: #333333;
			border-bottom: 1px solid #f1f1f1;
			padding-left: 25rpx;
		}

		.cont1 {
			padding: 0 30rpx 0 24rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 34rpx;

			.text {
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.text1 {
				font-weight: 500;
				font-size: 28rpx;
				color: #333;
			}

			.right {
				gap: 10rpx;

				.copy-img {
					width: 31rpx;
					height: 31rpx;
				}
			}
		}
	}

	.cont {
		width: 690rpx;
		height: 561rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: -90rpx auto 0 auto;
		padding-top: 97rpx;

		.img {
			width: 341rpx;
			height: 269rpx;
			display: block;
			margin: 0 auto;
		}

		.text {
			margin-top: 70rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding-left: 80rpx;
			line-height: 50rpx;
		}
	}

	.vip-img {
		width: 110rpx;
		height: 44rpx;
		margin-left: 10rpx;
		margin-top: 4rpx;
	}

	.container {
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;
		padding-bottom: 150rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 130rpx;
		background: #ffffff;

		.btn {
			width: 690rpx;
			height: 90rpx;
			background: #005097;
			border-radius: 45rpx;
			font-weight: 800;
			font-size: 30rpx;
			color: #ffffff;
		}
	}

	.tap {
		width: 100vw;
		height: 414rpx;
		background: linear-gradient(0deg, #164fa0, #4377c1);
		// background: url('https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/index-bg.png') no-repeat;
		background-size: cover;
		padding-top: 177rpx;
		padding-left: 48rpx;
	}

	.out {
		width: 118rpx;
		height: 118rpx;
		background: rgba(245, 245, 245, 0.1);
		border-radius: 50%;

		.nei {
			width: 107rpx;
			height: 107rpx;
			background: rgba(245, 245, 245, 0.3);
			border-radius: 50%;
			position: relative;

			.gj {
				width: 52rpx;
				height: 43rpx;
				position: absolute;
				top: -12rpx;
				left: -2rpx;
			}

			.img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}
	}

	.login-text {
		font-weight: 800;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 26rpx;
	}

	.avatar-box {
		padding-right: 30rpx;
		align-items: center;

		.name {
			font-weight: 800;
			font-size: 36rpx;
			color: #ffffff;
		}

		.id {
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			margin-top: 4rpx;
		}
	}
</style>